<template>
  <div class="category-container">
    <!-- 顶部搜索栏 - 直接使用公共组件，移除额外容器 -->
    <SearchBar @search="handleSearch" />

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧树形分类 - 使用公共组件 -->
      <div class="left-panel">
        <CategoryTree
          :categories="categoryTree"
          :selected-category-id="selectedCategoryId"
          :default-expanded-ids="expandedCategories"
          @select-category="handleSelectCategory"
          @toggle-category="handleToggleCategory"
        />
      </div>

      <!-- 右侧商品展示 - 使用商品卡片组件 -->
      <div class="right-panel">
        <div class="category-products">
          <h3 class="current-category-title">
            {{ selectedCategory ? selectedCategory.name : '热门推荐' }}
          </h3>
          <div class="products-grid">
            <ProductCard
              v-for="product in filteredProducts"
              :key="product.id"
              :product="product"
              :show-add-to-cart="true"
              @click="handleProductClick"
              @add-to-cart="handleAddToCart"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import SearchBar from '../../components/common/SearchBar.vue'
import CategoryTree from '../../components/common/CategoryTree.vue'
import ProductCard from '../../components/common/ProductCard.vue'
import { categoryTree, getCategoryById } from '../../data/categoryData.js'
import {
  products,
  getProductsByCategoryId,
  getHotRecommendedProducts,
} from '../../data/productData.js'
import { debounce } from '../../utils/common.js'

// 响应式数据
const expandedCategories = ref([1, 2, 3, 4, 5, 6, 7, 8]) // 默认展开所有分类
const selectedCategoryId = ref(null)
const searchKeyword = ref('')

// 处理搜索
const handleSearch = debounce(keyword => {
  searchKeyword.value = keyword
  console.log('搜索关键词:', keyword)
}, 300)

// 处理分类展开/折叠
const handleToggleCategory = (categoryId, isExpanded) => {
  console.log('分类展开状态变更:', categoryId, isExpanded)
}

// 处理分类选择
const handleSelectCategory = (categoryId, categoryInfo) => {
  selectedCategoryId.value = categoryId
  console.log('选中分类:', categoryId, categoryInfo)
}

// 处理商品点击
const handleProductClick = product => {
  console.log('点击商品:', product)
  // 实际项目中可以跳转到商品详情页
  // router.push(`/product/${product.id}`)
}

// 处理加入购物车
const handleAddToCart = product => {
  console.log('加入购物车:', product)
  // 实际项目中可以调用加入购物车接口
}

// 获取选中的分类信息
const selectedCategory = computed(() => {
  if (!selectedCategoryId.value) return null

  // 使用从公共数据文件导入的方法获取分类
  return getCategoryById(selectedCategoryId.value)
})

// 根据选中的分类和搜索关键词筛选商品
const filteredProducts = computed(() => {
  if (searchKeyword.value) {
    // 如果有搜索关键词，根据关键词筛选
    const lowerKeyword = searchKeyword.value.toLowerCase()
    return products.filter(product => product.name.toLowerCase().includes(lowerKeyword))
  }

  if (!selectedCategoryId.value) {
    // 如果没有选择分类，显示热门推荐商品
    return getHotRecommendedProducts(8)
  }

  // 根据选中的分类ID筛选商品
  return getProductsByCategoryId(selectedCategoryId.value)
})
</script>

<style scoped lang="less">
@import (reference) '../../styles/global.less';

.category-container {
  min-height: 100vh;
  background: @background-color;
}

/* 主内容区域 */
.main-content {
  display: flex;
  min-height: calc(100vh - 120px);

  /* 左侧分类面板 */
  .left-panel {
    width: 200px;
    background: @white;
    border-right: 1px solid @border-color;
    overflow-y: auto;
    flex-shrink: 0; /* 防止在小屏幕上被压缩 */
  }

  /* 右侧商品展示面板 */
  .right-panel {
    flex: 1;
    padding: 20px;
    overflow-y: auto;

    .current-category-title {
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 18px;
      color: @text-color;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }
  }
}

/* 响应式设计 - 修改为在小屏幕上保持两栏布局 */
@media (max-width: @screen-md) {
  .main-content {
    /* 保持flex布局，但允许内容滚动 */
    flex-direction: row;
    position: relative;
    overflow-x: auto;

    .left-panel {
      width: 180px; /* 稍微缩小左侧面板宽度 */
      border-right: 1px solid @border-color;
      border-bottom: none;
      max-height: none; /* 移除最大高度限制 */
    }

    .right-panel {
      padding: 15px; /* 稍微减小内边距 */
      min-width: calc(100vw - 180px); /* 确保右侧面板有足够的宽度 */

      .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 减小商品卡片最小宽度 */
        gap: 15px;
      }
    }
  }
}
</style>
